<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>表 {{.DbName}}/{{.CName}}</title>
		<style type="text/css">
		 h2 {
			 padding:0px 0px 0px 30px;
			 background:url(/static/img/database_table.png);
			 background-size:20px 20px;
			 background-repeat:no-repeat;
		 }
		 a {
			 text-decoration:none;
			 color:#4CAF50;
		 }
		 .tablejson {
			 background-color:#f5f5f5;
			 padding:15px;
			 border: 1px solid #f0f0f0;
			 font-family:"Courier New";
			 margin:15px;
		 }
		 .operate{
			 background-color:#f5f5f5;
			 padding:15px;
			 border: 1px solid #f0f0f0;
			 margin-top:15px;
		 }
		 .btn {
			 background-color:#4CAF50;
			 border: 1px solid #f0f0f0;
			 padding:10px 20px 10px 20px;
		 }
		 .btn:hover {
			 background-color:#2C5F40;
			 color:white;
		 }
		 .jsontree {
			 list-style :none;
		 }
		 .jbox{
			 background-color:#FFFFFF;
			 border:none;
			 margin:10px;
			 border-radius:5px;
			 box-shadow: 5px 5px 2px #cccccc;
		 }
		 .jbox legend {
			 background-color:#FFFFFF;
			 border:none;
			 padding:10px;
			 border-radius:8px;
			 font-weight:bold;
		 }
		 .opbox {
			 padding-left:30px;
		 }
		 .opbox a {
			 margin-left:5px;
			 padding:5px 10px 5px 10px;
			 font-size:14px;
			 color:#FFFFFF;
			 border-radius:4px;
		 }
		 .aedit {
			 background-color: #548AE8;			 
		 }
		 .aedit:hover{
			 box-shadow: 3px 3px 1px #aaaaaa;
		 }
		 .adel {
			 background-color: red;
		 }
		 .adel:hover {
			 box-shadow: 3px 3px 1px #aaaaaa;
		 }
		hr {
			height:1px;
			border-width:0;			
			background-color:#eeeeee;	
		}
		.mongban{
			width:100%;
			height:100%;
			position:absolute;
			left:0px;
			top:0px;
			z-index:1000;
			background-color:#aaaaaa;
			opacity:0.4;
		}
		</style>
    </head>
    <body>
		<h2><a href="/{{.DbName}}"> {{.DbName}} </a> / {{.CName}}</h2>
		<div id="id_json" class="tablejson">
			{{.JsonData}}
		</div>
		<div>
			<div id="id_tree" class="tablejson" style="width:45%;float:left;">
			</div>
			<div class="operate" style="width:45%;float:left;">
			<form action="" method="post" enctype="multipart/form-data">
				<input type="hidden" name="t" value="1" />
				<textarea id="id_inputbox" name="json" style="width:100%;height:200px;"> </textarea>
				<div style="text-align:center;padding:10px;">
					<input class="btn" type="submit" value="添加" />
					<input class="btn" type="button" value="查询" />
					<input class="btn" id="id_run" type="button" value="运行" />
				</div>
			</form>
			</div>
		</div>
		<div class="wbox">
			<div class="wheader"></div>
			<div class="wbody">

			</div>
		</div>
		<script type="text/javascript" src="/static/js/jquery-2.2.0.min.js"></script>
		<script type="text/javascript">
		 function FormatJson(doc){
             var lastChar = '';
             var isStr = false;
			 var text = "";
			 var html = "";
             for (i = 0; i < doc.length; i++){                
                 if(!isStr && (doc[i] == "[" || doc[i] == "]" || doc[i] == "{" || doc[i] == "}")){
                     if(text != ""){
						 html += ("<li>"+text+"</li>");
                         text = "";
                     }
					 if (doc[i] == "[" || doc[i] == "{"){
                         html += ("<ul class=\"jsontree\"><li>"+doc[i]+"</li>");
                     } else if(doc[i] == "]" || doc[i] == "}"){
						 var dh = 0;
						 if(i < doc.length - 1){
							 if(doc[i+1] == ","){
								 dh = 1;
							 }
						 }
                         html += ("<li>"+doc[i]+ (dh == 1?",":"") + "</li></ul>");
                     }

                 }else if(doc[i] == "\"" && lastChar != "\\"){
                     text += doc[i];
                     isStr = !isStr;                    
                 }else if(doc[i] == "," && !isStr){
					 if (lastChar == "]" || lastChar == "}"){

					 }else{
						 text += doc[i];
						 html += ("<li>"+text+"</li>");
						 text = "";
					 }
                 }else {
                     text += doc[i];
                 }
                 lastChar = doc[i];
             }

			 return html;
         }
		 $(function(){
			 $.get("/json/{{.DbName}}/{{.CName}}?p=1&psize=10", function(json){
				 var html = "";
				 var index = 1;
				 for (i in json.Data){
					 var dobj = json.Data[i];
					 var d = FormatJson(JSON.stringify(dobj));
					 html += ("<fieldset class=\"jbox\"><legend>" + index + ". " + dobj._id +  "</legend>"+ 
					 ("<div class=\"opbox\" d-id=\""+dobj._id+"\"><a href=\"#\" class=\"aedit\">编辑</a><a href=\"#\" class=\"adel\">删除</a></div><hr />") 
					 + d + "</fieldset>");
					index++;
				 }				
				 $("#id_tree").html(html);
			 });

			 $("#id_tree").on("click",".adel",function(){
				 var id = $(this).parent().attr("d-id");
				 $.ajax({
   						type: "POST",
   						url: "/json/{{.DbName}}/{{.CName}}",
   						data: {"id":id,"type":"d"},
   						success: function(msg){
     						if (msg == "1"){
								$("div[d-id='"+id+"']").parent("fieldset").remove();
							}else{
								alert(msg);
							}
   						}
						});
			 });

			 $("#id_tree").on("click",".aedit",function(){
				 var uu = $(this).parent().parent().find("ul");
				 $("body").append("<div class='mongban'></div>")
				 console.log(uu.text());
			 });

			 $("#id_run").click(function(){
				 var json = $("#id_inputbox").val();				 
				 $.post("/json/{{.DbName}}/{{.CName}}",
				 	{"json":json,"type":"u"},
				 	function(data){
						 console.log(data);
				 	});
			 });
		 });
		</script>
    </body>
</html>
